<template>
	<div class="container">
		<el-dialog :title="title + '用户'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form ref="form" :model="info" label-width="80px">
				<el-form-item label="知识名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="知识标题">
					<el-input v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="知识类型">
					<el-input v-model="form.type"></el-input>
				</el-form-item>
				<el-form-item label="知识内容">
					<el-input show-password v-model="form.content" type="textarea" :rows="10"></el-input>
				</el-form-item>
				<el-form-item label="知识图片">
					<el-upload list-type="picture" action='' accept=".jpg, .png" :limit="1" :auto-upload="false"
						:file-list="fileList" :on-change="getFile" :on-remove="handleUploadRemove">
						<el-button size="small" type="primary">选择图片上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="onSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import * as knowledgeApi from "@/api/knowledge.js"; //引入
	export default {
		data() {
			return {
				dialogVisible: false,
				form: {
					id: "",
					name: "",
					title: "",
					content: "",
					type: "",
					img: ""
				},
				type: 'add',
				fileList: [],
			}
		},
		computed: {
			title() {
				return this.type == 'add' ? '添加' : "编辑"
			}
		},

		created() {

		},
		methods: {
			open(row, type){
				this.dialogVisible = true
				this.type = type
				if (type == 'edit') {
					this.form = row
					this.fileList = []
					    let obj = {
					      name: '知识图片',
					      url: row.img
					    }
					    this.fileList.push(obj);
				} else {
					this.form = {
						id: "",
						name: "",
						title: "",
						content: "",
						type: "",
						img: ""
					}
					this.fileList = []
				}
			},
			handleClose(){
				this.dialogVisible = false
			},
			onSubmit(){
				let method = this.type == 'add' ? 'add' : 'update'
				knowledgeApi[method](this.form).then(res => {
					if(res.code == 200){
						this.$message.success(res.message)
						this.handleClose()
						this.$emit("close")
					}
				})
			},
			getFile(file, fileList) {
				this.getBase64(file.raw).then(res => {
					const params = res.split(',')
					console.log(params, 'params')
					if (params.length > 0) {
						this.form.img = params[0] + "," + params[1]
					}
				})
			},
			handleUploadRemove(file, fileList) {
				this.form.img = '';
			},
			// 获取图片转base64
			getBase64(file) {
				return new Promise(function(resolve, reject) {
					const reader = new FileReader()
					let imgResult = ''
					reader.readAsDataURL(file)
					reader.onload = function() {
						imgResult = reader.result
					}
					reader.onerror = function(error) {
						reject(error)
					}
					reader.onloadend = function() {
						resolve(imgResult)
					}
				})
			},
		}
	}
</script>

<style>
</style>